<template>
  <div class="ysq-left-top d-flex-c overflow-hidden">
    <div class="panel-header-bg flex-between">
      <div class="title-text">
        雨情信息
      </div>
      <SwitchTab
        :tab-list="queryTabList"
        v-model="yqQueryType"
      />
    </div>

    <div class="d-flex-c panel-zone-big-bg left-top flex-1 full-width overflow-x-hidden overflow-y-auto">
      <div class="flex-between flex-1 flex-box-height">
        <div
          class="panel-zone-bg m-r-mini flex-1 full-height"
        >
          <div class="little-title flex-0">
            实况降雨
          </div>
          <div class="flex-1">
            <BKChart
              :option="actualRainfallOptions"
            />
          </div>
        </div>
        <div
          class="panel-zone-bg rain-desc-box full-height"
        >
          <div class="little-title m-b-mini">
            雨情概述
          </div>
          <div class="rain-desc-scroll">
            <span
              class="p-l-mini f-14"
              v-html="htmlRainDesc"
            />
          </div>
        </div>
      </div>
      <div class="flex-between fixed-box-height flex-0">
        <FeatureStatistics
          :columns="featureColumns"
          class="m-r-mini full-height flex-1"
        />
        <RainAlarm class="panel-zone-bg  flex-0 full-height" />
      </div>
    </div>
  </div>
</template>

<script>
import SwitchTab from '@/views/business/ysqjcdp/components/switch-tab.vue'
import RainAlarm from '@/views/business/ysqjcdp/components/business/rain-alarm.vue'
import FeatureStatistics from '@/views/business/ysqjcdp/components/business/feature-statistics.vue'
import { getBarOption, verticalXAXisLabel } from '@/components/chart/echart-utils'

export default {
  name: 'YsqLeftTop',
  components: { SwitchTab, RainAlarm, FeatureStatistics },
  data () {
    return {
      yqQueryType: '1',
      featureTab: 'today',
      featureButtonTab: 'long',
      htmlRainDesc: '',
      actualRainfallOptions: null,
      featureColumns: [
        {
          title: '时段',
          field: 'type',
          width: 60
        },
        {
          title: '雨量',
          field: 'rainValue',
          width: 60
        },
        {
          title: '站名',
          field: 'stnm',
          width: 60
        },
        {
          title: '起始日期',
          field: 'tm',
          width: 90
        },
        {
          label: '历史最大',
          field: 'historyMixValue',
          headerClassName: 'wrap-header-cell',
          width: 70,
          slots: {
            header: () => {
              return [
                <div class="d-flex-c ai-c">
                  <span>历史最大</span>
                  <span>(mm)</span>
                </div>
              ]
            }
          }
        }

      ]
    }
  },
  watch: {
    yqQueryType () {
      this.setActualRainfallOptions()
    }
  },
  computed: {
    queryTabList () {
      return [
        {
          label: '今日以来',
          value: '1'
        },
        {
          label: new Date().getHours() + '时以来',
          value: '2'
        }, {
          label: '1h',
          value: '3'
        },
        {
          label: '3h',
          value: '4'
        },
        {
          label: '6h',
          value: '5'
        },
        {
          label: '12h',
          value: '6'
        },
        {
          label: '24h',
          value: '7'
        }
      ]
    }
  },
  mounted () {
    this.getYQGSData()
    this.setActualRainfallOptions()
  },
  methods: {
    async getYQGSData () {
      const data = await this.$request.formDataPost(window.outApiHw1 + 'hw-api/outInterface/selectOverviewRainSituation', { })
      let qs = '0'
      if (data.areaList) {
        const hb = data.areaList.find(c => c.name === '河北省')
        if (hb) {
          qs = this.getNum(hb.rainValue)
        }
      }
      let str = `全省面雨量${qs}mm`
      if (data.basin) {
        let basin = data.basin.sort((a, b) => {
          return Number(b.rainValue) - Number(a.rainValue)
        })
        str = str + '，其中'
        basin = basin.slice(0, 3)
        for (let i = 0; i < basin.length; i++) {
          str = str + `${basin[i].name}${this.getNum(basin[i].rainValue)}mm`
          if (i === basin.length - 1) {
            str = str + '。'
          } else {
            str = str + '，'
          }
        }
      }
      if (data.areaList) {
        let areaList = data.areaList.filter(c => c.name !== '河北省').sort((a, b) => {
          return Number(b.rainValue) - Number(a.rainValue)
        })
        str = str + '行政分区前三位为'
        areaList = areaList.slice(0, 3)
        for (let i = 0; i < areaList.length; i++) {
          str = str + `${areaList[i].name}${this.getNum(areaList[i].rainValue)}mm`
          if (i === areaList.length - 1) {
            str = str + '。'
          } else {
            str = str + '，'
          }
        }
      }
      if (data.maxCumulative) {
        str = str + `全省累计最大点雨量为${data.maxCumulative.name}${this.getNum(data.maxCumulative.rain)}mm；`
      }
      if (data.maxHour) {
        str = str + `最大1小时雨量${data.maxHour.name}${this.getNum(data.maxHour.rain)}mm。`
      }
      this.htmlRainDesc = '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' + str.replace(/(\d+(\.\d+)?mm)/g, (match) => {
        return '<span class=\'c-text-blue\'>' + match + '</span>'
      })
    },
    async setActualRainfallOptions () {
      let data = await this.$request.formDataPost(window.outApiHw + 'hw-api/outInterface/selectActualPrecipitation', { type: this.yqQueryType })
      data = data.map(item => { return { ...item, xzqmc: item.name, num: item.rainValue } })
      const result = getBarOption({
        yAxisName: 'mm',
        xAxis: data.map(r => r.xzqmc),
        series: [
          {
            name: '降雨量',
            type: 'bar',
            color: ['#0382FC00', '#0382fc'],
            data: data.map(r => {
              return {
                ...r,
                value: r.num
              }
            })
          }
        ]
      })
      if (!data.length) {
        result.grid.left = 20
      }
      result.grid.bottom = -6
      result.series[0].itemStyle.borderRadius = [12, 12, 0, 0]
      // result.series[0].label = {
      //   show: true,
      //   position: 'top',
      //   fontSize: '14px',
      //   color: '#fff'
      // }
      result.series[0].barMaxWidth = 12
      result.xAxis.axisLabel.color = '#FFFFFF'
      result.yAxis.axisLabel.color = '#FFFFFF'
      result.xAxis.axisLine = {
        show: true,
        lineStyle: {
          color: 'rgba(233,237,240,0.1)'
        }
      }
      result.xAxis.axisLabel.interval = 0
      result.xAxis.axisLabel.formatter = verticalXAXisLabel
      result.yAxis.splitLine.show = false
      result.yAxis.axisLine = {
        show: true,
        lineStyle: {
          color: 'rgba(233,237,240,0.1)'
        }
      }
      result.yAxis.nameTextStyle = {
        color: '#C4CBD9',
        fontSize: '14px',
        padding: [0, 0, 0, -20]
      }
      result.tooltip.appendToBody = true
      this.actualRainfallOptions = result
    },
    getNum (val) {
      if (val === null || val === undefined || isNaN(Number(val)) || val === '') {
        return '0'
      }
      return val
    }
  }
}
</script>

<style lang="scss" scoped>
.flex-box-height {
  min-height: 186px;
  // max-height: 300px;
  margin-bottom: 10px;
}

.fixed-box-height {
  flex: 1;
  min-height: 290px;
  max-height: 300px;
}

.rain-desc-box {
  width: 220px;
  position: relative;
  padding-right: 0 !important;

  .rain-desc-scroll {
    overflow-y: auto;
    padding-right: 6px;
  }

  span {
    line-height: 20px;
  }

  &::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    background-image: url("~@/assets/images/ysqjcdp/rain-desc.png");
    background-size: 100% 100%;
    width: 100%;
    height: 28px;
  }
}

</style>
